<clr-header class="header"
            [ngClass]="headerClass">

  <div class="header-nav"
       [clr-nav-level]="1">
    <a [routerLink]='"nav"'
       class="nav-link"
       [routerLinkActive]="'active'"
       (click)="navigateLast()">
      <span class="nav-text">
        <clr-icon shape="bug"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"lab"'
       class="nav-link"
       *ngIf="lab"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="lightbulb"
                  [ngClass]="{'has-badge': labBadge}"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"home"'
       class="nav-link"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="dashboard"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"travel"'
       class="nav-link"
       *ngIf="travel"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="world"
                  [ngClass]="{'has-badge': travelBadge}"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"auto"'
       class="nav-link"
       *ngIf="autoBuy"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="star"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"pre"'
       class="nav-link"
       *ngIf="prestige"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="store"></clr-icon>
      </span>
    </a>
    <a [routerLink]='"mast"'
       class="nav-link"
       *ngIf="mastery"
       [routerLinkActive]="'active'">
      <span class="nav-text">
        <clr-icon shape="star"></clr-icon>
      </span>
    </a>
  </div>

  <div class="header-actions">

    <form class="search">
      <label id="multiLabel"
             for="multi">数量(N):&nbsp;</label>
      <input class="multiBuy"
             min="1"
             id="multi"
             type="number"
             name="buyMulti"
             placeholder="Buy multiplier"
             [(ngModel)]="buyMulti">
    </form>

    <clr-dropdown  style="padding-left: 15px;">
      <button class="nav-icon"
              clrDropdownTrigger>
        <clr-icon shape="tools"></clr-icon>
        <clr-icon shape="caret down"></clr-icon>
      </button>
      <clr-dropdown-menu *clrIfOpen
                         clrPosition="bottom-right">

        <clr-dropdown *ngIf="ms.game.allPrestige.time.timeProducer.quantity.gt(0)">
          <button type="button"
                  clrDropdownTrigger>时间扭曲</button>
          <clr-dropdown-menu clrPosition="left-top">
            <a clrDropdownItem
               (click)="warp(p)"
               *ngFor="let p of minuteWarps"
               [ngClass]="{'disabled': !warpAv(p)}">
              扭曲 {{p}} 分钟
            </a>
          </clr-dropdown-menu>
        </clr-dropdown>

        <a clrDropdownItem
           (click)="all100()">全部 100%</a>

        <clr-dropdown *ngFor="let list of groupNoEnemy; trackBy:getListId">
          <button type="button"
                  clrDropdownTrigger>{{list.name}}</button>
          <clr-dropdown-menu clrPosition="left-top"
                             *clrIfOpen>
            <a clrDropdownItem
               (click)="list.buyN(buyMulti)">购买 n</a>
            <a clrDropdownItem
               (click)="list.buyTeam(buyMulti)"
               *ngIf="ms.game.researches.team2.done">团队 n</a>
            <a clrDropdownItem
               (click)="list.buyTwins(buyMulti)"
               *ngIf="ms.game.researches.twin.done">双胞胎 n</a>
            <div class="dropdown-divider"></div>
            <clr-dropdown *ngIf="ms.game.tabs.autoBuy.unlocked && list.hasAutoBuy()">
              <button type="button"
                      clrDropdownTrigger>自动购买者</button>
              <clr-dropdown-menu *clrIfOpen>
                <a clrDropdownItem
                   (click)="list.autoBuy(true)">全部开启</a>
                <a clrDropdownItem
                   (click)="list.autoBuy(false)">全部关闭</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyBuy()"
                   (click)="list.autoBuyBuy(true)">孵化开启</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyBuy()"
                   (click)="list.autoBuyBuy(false)">孵化关闭</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyTeam()"
                   (click)="list.autoBuyTeam(true)">团队开启</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyTeam()"
                   (click)="list.autoBuyTeam(false)">团队关闭</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyTwin()"
                   (click)="list.autoBuyTwin(true)">双胞胎开启</a>
                <a clrDropdownItem
                   *ngIf="list.hasAutoBuyTwin()"
                   (click)="list.autoBuyTwin(false)">双胞胎关闭</a>
              </clr-dropdown-menu>
            </clr-dropdown>
            <div class="dropdown-divider"
                 *ngIf="ms.game.tabs.autoBuy.unlocked && list.hasAutoBuy()"></div>
            <a clrDropdownItem
               (click)="allCustom(p, list)"
               *ngFor="let p of percentPreset">
              {{p}}%
            </a>
          </clr-dropdown-menu>
        </clr-dropdown>

      </clr-dropdown-menu>
    </clr-dropdown>

    <a href="javascript://"
       class="nav-link nav-icon">
      <clr-icon shape="clock"
                (click)="openTimeModal()"></clr-icon>
    </a>
    <a href="javascript://"
       class="nav-link nav-icon">
      <clr-icon [attr.shape]="ms.game.isPaused ? 'play' : 'pause'"
                (click)="ms.game.isPaused = ! ms.game.isPaused"></clr-icon>
    </a>
    <a [routerLink]="'opt/save/'"
       class="nav-link nav-icon"
       [routerLinkActive]="'active'">
      <clr-icon shape="cog"></clr-icon>
    </a>
  </div>

</clr-header>

<clr-modal [(clrModalOpen)]="timeModal"
           [clrModalSize]="'lg'">
  <h3 class="modal-title">时间扭曲</h3>
  <div class="modal-body actMinH"
       *ngIf="ms.game.actMin && ms.game.actHour">
    <span> 你可以跳过 {{ms.game.time.quantity.toNumber() *1000| endIn}}:
      <span class="monospace">
        {{ms.game.time.quantity | format}}
      </span>
    </span>
    <br />
    <span>
      你得到了
      <span class="monospace">
        {{ms.game.time.c | format }}</span>
      /秒 最大: <span class="monospace">{{ms.game.maxTimeBank | format}}</span>
    </span>
    <div class="clr-row">
      <div class="clr-col-6">
        <app-action [action]="ms.game.actMin"></app-action>
      </div>
      <div class="clr-col-6">
        <app-action [action]="ms.game.actHour"></app-action>
      </div>
    </div>
  </div>
</clr-modal>
